<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type='primary' @click='AddNotice'>添加</el-button>

            </div>
            <el-table :data="tableData"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      v-loading="loading"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header">
                <el-table-column prop="id" label="序号" align="center"></el-table-column>
                <el-table-column prop="title" label="公告名称" align="center"></el-table-column>
                <el-table-column prop="text" label="公告内容" align="center">
                    <template slot-scope="scope">
                       <div v-html="scope.row.text"></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button type="text" @click="CliDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="type===1?'添加公告':'修改公告'"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="from" label-width="100px">
                
                <el-form-item label="公告名称中文">
                    <el-input v-model="from.title"></el-input>
                </el-form-item>
                <el-form-item label="公告名称英文">
                    <el-input v-model="from.e_title"></el-input>
                </el-form-item>
                <el-form-item label="公告内容中文">
                    <quill-editor ref="myTextEditor" v-model="from.text" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="公告内容英文">
                    <quill-editor ref="myTextEditor" v-model="from.e_text" :options="editorOption"></quill-editor>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Notice">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'
import VueCropper from 'vue-cropperjs';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {
    quillEditor
} from 'vue-quill-editor';
export default {
    name: 'LoginLogList',
    components: {
        VueCropper,
        quillEditor
    },
    data() {
        return {
            type: null,
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            editorOption: {
                placeholder: 'Hello World'
            },
            pageTotal: 0,
            tableData: [],
            loading: true,
            dialogVisible: false,
            from: {
                id: '',
                text: '',
                title:'',
                e_text:'',
                e_title:''
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleEdit(index, row) {
            this.type = 2
            this.dialogVisible = true
            this.from.id = row.id
            
            this.from.text = row.text
            this.from.title = row.title
            this.from.e_text = row.e_text
            this.from.e_title = row.e_title
        },
        async CliDelete(index,row) {
            this.$confirm('请问是否删除这条公告', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '删除',
                cancelButtonText: '取消'
            })
                .then(async () => {
                    let info = await AxiosPost('/admin/shop_set/delnotice', {id:row.id})
                    if (info.code !== 10000) {
                        this.$message.error(info.message)
                        return false
                    }
                    this.$message.success(info.message)
                    this.dialogVisible = false
                    this.from = {
                        id: '',
                        text: '',
                        title:'',
                        e_text:'',
                        e_title:''
                    }
                    this.getData()
                })
                .catch(action => {

                });

        },
        async Notice() {
            let info = await AxiosPost('/admin/shop_set/savenotice', this.from)
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.$message.success(info.message)
            this.dialogVisible = false
            this.from = {
                id: '',
                text: '',
                title:''
            }
            this.getData()
        },
        AddNotice() {
            this.type = 1
            this.dialogVisible = true
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/shop_set/noticelist', this.query)
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            this.tableData = info.data.list
            this.pageTotal = info.data.meta.total;
        },
    }
};
//时间戳转换
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
